<template>
  <el-container class="outside-container">
    <el-container style="overflow: auto">
      <SideBar v-if="headerActiveMenu !== 'home'" :collapse="isCollapse" :handleMenuItemClick="handleMenuItemClick"></SideBar>
      <el-container>
        <el-header>
          <Header :handleIconClick="handleIconClick" :collapse="isCollapse"></Header>
        </el-header>
        <el-main>
          <transition name="fade" mode="out-in">
            <router-view></router-view>
          </transition>
        </el-main>
        <el-footer>©版权所有</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
  import Header from '@/components/layout/Header'
  import SideBar from '@/components/layout/SideBar'

  export default {
    name: 'Index',
    components: {Header, SideBar},
    data() {
      return {
        isCollapse: false,
      }
    },
    computed: {
      headerActiveMenu: {
        set(val) {
          this.$store.commit('setHeaderActiveMenu', val)
        },
        get() {
          return this.$store.state.headerActiveMenu
        },
      }
    },
    methods: {
      handleIconClick() {
        this.isCollapse = !this.isCollapse
      },
      // 全屏
      handleFullScreen() {
        let element = document.documentElement;
        if (this.fullscreen) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        } else {
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen();
          }
        }
        this.fullscreen = !this.fullscreen;
      },
      handleMenuItemClick(route) {
        this.$router.push(route)
      },
      isIE() {
        if (!!window.ActiveXObject || "ActiveXObject" in window) {
          return true;
        } else {
          return false;
        }
      }
    },
    mounted() {
      if(this.isIE()) {
        this.$alert('检测到您的浏览器是IE内核,为了有更好的体验,请前往下载360极速浏览器', '系统提示', {
          confirmButtonText: '确定',
          // callback: action => {}
        });
      }
      this.breadcrumbList = this.$route.matched
    },
  }
</script>

<style lang="scss" scoped>
  .outside-container {
    height: 100%;

    .el-header {
      height: 40px !important;
      line-height: 40px;
      padding: 0;
      background-color: #fff;
      box-shadow: 1px 1px 3px #c7c7c7;
      z-index: 10;
    }

    .el-main {
      padding: 15px;
      overflow-x: hidden;
      background-color: #f0f2f5;
      z-index: 9;
    }

    .el-footer {
      box-shadow: 1px -1px 3px #c7c7c7;
      color: #333;
      text-align: right;
      height: 30px !important;
      line-height: 30px;
      font-size: 12px;
    }

    /* fade-transform */
    .fade-transform-leave-active,
    .fade-transform-enter-active {
      transition: all .4s;
    }

    .fade-transform-enter {
      opacity: 0;
      transform: translateX(-30px);
    }

    .fade-transform-leave-to {
      opacity: 0;
      transform: translateX(20px);
    }

    .fade-enter-active, .fade-leave-active {
      transition: opacity .3s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0;
    }
  }
</style>
